<template>
    <div>
        <!-- 左 -->
        <div style="float: left;display: flex;margin-bottom: 10px;">
            <el-input
                @clear="BtHiAttachment_input"
                clearable
                prefix-icon="el-icon-search"
                placeholder="请输入文件名称"
                v-model="BtHiAttachmentPage.attachmentName"
                @keydown.enter.native="initBtHiAttachmentListQuery">
            </el-input>
            <el-input
                @clear="BtHiAttachment_input"
                clearable
                style="margin-left: 8px;"
                prefix-icon="el-icon-search"
                placeholder="请输入实例编号"
                v-model="BtHiAttachmentPage.instanceId"
                @keydown.enter.native="initBtHiAttachmentListQuery">
            </el-input>
            <el-select style="margin-left: 8px;width:50%" v-model="BtHiAttachmentPage.attachmentType" clearable placeholder="请选择文件类型">
                <el-option
                v-for="item in attachmentTypes"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <el-button style="margin-left: 8px;" icon="el-icon-search" type="info" @click="initBtHiAttachmentListQuery">查询</el-button>
            <el-button
                type="primary"
                @click="resetCondition"><i class="el-icon-remove"></i><span>重置</span>
            </el-button>
        </div>
        <!-- 右 -->
        <div style="display: flex;justify-content: flex-end">
            <el-button
                type="primary"
                @click="uploadAttachment"><i class="el-icon-upload el-icon--right"></i><span>上传</span>
            </el-button>
        </div>
        <!-- 下 -->
        <div class="pageList">
            <el-table
                :data="BtHiAttachmentList"
                stripe
                border
                style="width: 100%"
                v-loading="loading"
                element-loading-text="正在加载..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                @selection-change="handleSelectionChange">
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>
               <el-table-column :show-overflow-tooltip="true"
                        label="所属模块"
                        width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.modelChunk }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="文件名称"
                        width="300">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p>文件编号: {{ scope.row.attachmentId }}</p>
                            <p>文件名称: {{ scope.row.attachmentName }}</p>
                            <p v-if="scope.row.attachmentType=='images'">文件类型: 图片</p>
                            <p v-if="scope.row.attachmentType=='documents'">文件类型: 文档</p>
                            <p v-if="scope.row.attachmentType=='videos'">文件类型: 视频</p>
                            <p v-if="scope.row.attachmentType=='musics'">文件类型: 音乐</p>
                            <p v-if="scope.row.attachmentType=='others'">文件类型: 其他</p>
                            <p>文件地址: {{ scope.row.attachmentPath }}</p>
                            <p>实例编号: {{ scope.row.instanceId }}</p>
                            <p>创建者: {{ scope.row.realName }}</p>
                            <p>附件信息: {{ scope.row.attachmentDescription }}</p>
                            <p>创建时间: {{scope.row.createTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</p>
                            <div slot="reference" class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.attachmentName }}</el-tag>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column
                        label="文件类型" width="100">
                    <template slot-scope="scope">
                        <span v-if="scope.row.attachmentType=='images'">图片</span>
                        <span v-if="scope.row.attachmentType=='documents'">文档</span>
                        <span v-if="scope.row.attachmentType=='videos'">视频</span>
                        <span v-if="scope.row.attachmentType=='musics'">音乐</span>
                        <span v-if="scope.row.attachmentType=='others'">其他</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true"
                        label="附件信息"
                        width="300">
                    <template slot-scope="scope">
                        <span>{{ scope.row.attachmentDescription }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建者"
                        width="100">
                    <template slot-scope="scope">
                        <span>{{ scope.row.realName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="创建时间" width="200">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime| dateFormat('YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button
                                type="primary"
                                icon="el-icon-view"
                                @click="viewAttachmentClick(scope.row)">预览</el-button>
                        <el-button
                                type="success"
                                icon="el-icon-bottom"
                                @click="downloadAttachmentClick(scope.row)">下载</el-button>
                        <el-button
                                type="danger"
                                icon="el-icon-delete"
                                @click="deleteAttachment(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="deleteAttachmentByIds" type="danger" icon="el-icon-delete" style="margin-top: 8px;float: left;" :disabled="this.multipleSelection.length==0">批量删除</el-button>
            <div style="display: flex;justify-content: flex-end;margin-top: 8px;">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes, prev, pager, next, jumper, ->, total, slot"
                        :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>

import eventBus from '@/eventBus.js'

export default {
    name:"SystemBtHiAttachment",
    data(){
        return{
            loading:false,
            BtHiAttachmentList:[],
            BtHiAttachmentPage:{
                attachmentName: "",
                attachmentType: "",
                instanceId: "",
                otherTimeAfter: "",
                otherTimeBefore: "",
                pageNum: 0,
                pageSize: 0,
            },
            total: 0,
            multipleSelection:[],
            attachmentTypes:[{
                    value: "",
                    label: '文件类型'
                },{
                    value: "images",
                    label: '图片'
                },{
                    value: "documents",
                    label: '文档'
                },{
                    value: "videos",
                    label: '视频'
                },{
                    value: "musics",
                    label: '音频'
                },{
                    value: "others",
                    label: '其他'
                }
            ]
        }
    },
    mounted(){
        this.initBtHiAttachmentListQuery();
        // 文件选择后的回调
        eventBus.$on('fileAdded', () => {
          console.log("文件选择成功");
        });
        // 文件上传成功的回调
        eventBus.$on('fileSuccess', () => {
            this.initBtHiAttachmentListQuery();
        });
    },
    methods:{
        initBtHiAttachmentListQuery(){
            this.loading = true;
            this.postRequest("/resources/BtHiAttachment/query/BtHiAttachmentPageList",this.BtHiAttachmentPage).then(resp => {
                this.loading = false;
                if (resp) {
                    this.BtHiAttachmentList = resp.data.list;
                    this.total = resp.data.total;
                }
            });
        },
        // 重置查询条件
        resetCondition(){
            this.BtHiAttachmentPage.attachmentType = '';
            this.BtHiAttachmentPage.attachmentName = '';
            this.BtHiAttachmentPage.instanceId = '';
            this.BtHiAttachmentPage.otherTimeBefore = '';
            this.BtHiAttachmentPage.otherTimeAfter = '';
            this.initBtHiAttachmentListQuery();
        },
        // 批量删除
        deleteAttachmentByIds(){
            this.$confirm('此操作将暂时删除【'+this.multipleSelection.length+'】条记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let attachmentIds = '?';
                this.multipleSelection.forEach(item=>{
                attachmentIds += 'attachmentIds='+item.attachmentId+'&';
            })
            this.deleteRequest("/resources/BtHiAttachment/delete/BtHiAttachmentBatchByAttachmentIds"+ attachmentIds).then(resp=>{
            if (resp){
                this.initBtHiAttachmentListQuery();
            }
            })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        // 删除
        deleteAttachment(data){
            this.$confirm('此操作将暂时删除【'+data.attachmentName+'】, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.deleteRequest('/resources/BtHiAttachment/delete/BtHiAttachmentByAttachmentId/'+data.attachmentId).then(resp=>{
                    if (resp){
                        this.initBtHiAttachmentListQuery();
                    }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });
            });
        },
        // 下载
        downloadAttachmentClick(data){
            this.$confirm('是否确定下载该文件？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.downloadAttachment('/resources/BtHiAttachment/download/Attachment/', data.attachmentId)
                }).then(() => {

            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消下载'
                });
            });
        },
        // 预览
        viewAttachmentClick(data){
             let Base64 = require('js-base64').Base64;
             window.open('http://127.0.0.1:8012/onlinePreview?url='+encodeURIComponent(Base64.encode("http://localhost:8080/resources/"+data.attachmentPath)));
        },
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        // 分页
        sizeChange(currentSize) {
            this.BtHiAttachmentPage.pageSize = currentSize;
            this.initBtHiAttachmentListQuery();
        },
        currentChange(currentPage) {
            this.BtHiAttachmentPage.pageNum = currentPage;
            this.initBtHiAttachmentListQuery();
        },
        // 条件清除@Clear
        BtHiAttachment_input(){

        },
        // 文件上传
        uploadAttachment(){
            // 打开文件选择框
            eventBus.$emit('openUploader', {
              instanceId: guid(),
              modelChunk: 'system'
            })
        }
    }
}
// UUID
function guid() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        var r = Math.random() * 16 | 0,
            v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}
</script>

<style scoped>


</style>
